<template>
  <div class="reviewblock" style="display: flex;max-width: 600px;margin:0 auto">
    <div class="left_wrapper left_right" >
      <el-button circle icon="el-icon-arrow-left" class="lr_btn" @click="backOne"></el-button>
    </div>
    <div class="reviewblock_inner" style="width: 100%;max-width: 500px;margin: 0 auto;
      height: 200px;">
      <div class="page_wrapper" style="font-weight: bold;color: #2473fc">
        {{start}}/{{end}}
        <hr style="border:1px solid #2473fc;width: 10px;margin-bottom: 3px;">
        <hr style="border:1px solid #2473fc;width: 20px;margin-top: 3px;">
      </div>

        <div class="src" style="width: 100%;margin-top: 20px;font-size: 30px;font-weight: bold">
          <router-link to="/worddetail" ><span @click="list_item_click(cur_word.id)">{{cur_word.src}}</span></router-link>
        </div>


      <div v-show="showfanyi" class="tgt" style="width: 100%;margin-top: 50px;font-size: 30px;font-weight: bold" >
        {{cur_word.tgt}}
      </div>
    </div>
    <div class="right_wrapper left_right">
      <el-button circle icon="el-icon-arrow-right" class="lr_btn" @click="nextOne"></el-button>
    </div>
  </div>
</template>

<script>
  import {mapGetters, mapState} from 'vuex'
    export default {
      name: "ReviewBlock",
      props: ['showfanyi'],
      data(){
        return {
          start: 0,
          // end: 0
        }
      },
      mounted() {
        // console.debug(this.see_find_word_list.length+"长度")
        this.start = this.see_find_word_list.length>0?1:0
        // this.end = this.end
      },
      methods:{
        list_item_click(id){
          this.$store.commit('setWordDetailId', id)
          window.localStorage.setItem("cur_wordid", id)
        },
        nextOne(){
          let step = 1
          let abc = this.start+step
          // console.debug("start:"+this.start)
          if(abc<=this.end){
            // console.debug(" nextif")
            this.start = this.start+step
          }
          // this.start = ((this.start+step)>=1&this.start+step<=end)?(this.start+step):this.start
        },
        backOne(){
          let step = -1
          let abc = this.start+step
          if(abc>0){
            this.start = this.start+step
          }
          // this.start = ((this.start+step)>=1&this.start+step<=end)?(this.start+step):this.start
        }
      },
      computed: {
        ...mapState(['see_find_word_list']),
        ...mapGetters({end: 'end'}),
        cur_word(){
          // console.debug("src 计算机属性")
          let size = this.see_find_word_list.length
          if(size>0){
            // console.debug("src 计算属性return 非 null")
            return this.see_find_word_list[this.start-1]
          }else {
            // console.debug("src 计算属性return null")
            return {src: 'null', tgt: 'null', id: 1}
          }
        }
      },
      watch: {
        see_find_word_list(newv, oldv){
          this.start = newv.length>0?1:0
        }
      }
    }
</script>

<style scoped>
  .left_right{width: 80px;}
  .lr_btn{
    width: 50px;height: 50px;margin-top: 60px;
  }
</style>
